<template>
  <div class="footer-bar">
    <router-link class="router-link home" to="/home"></router-link>
    <router-link class="router-link movie" to="/movie"></router-link>
    <router-link class="router-link ticket" to="/ticket"></router-link>
    <router-link class="router-link cinema" to="/cinema"></router-link>
    <router-link class="router-link mine" to="/mine"></router-link>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
// flex布局
.footer-bar {
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 104px;
  // background-color: #33363D;
  background: url("../assets/imgs/icons/footer-bar-bg.png") no-repeat center;
  background-size: 100% 104px;
  z-index: 999;
  // 点击热区 尽量符合用户使用习惯
  .router-link {
    width: 72px;
    height: 72px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46px;
    margin-top: 16px;
    &.home {
      background-image: url("../assets/imgs/icons/home.png");
    }
    &.home.router-link-active {
      background-image: url("../assets/imgs/icons/home-active.png");
    }

    &.movie {
      background-image: url("../assets/imgs/icons/movie.png");
    }
    &.movie.router-link-active {
      background-image: url("../assets/imgs/icons/movie-active.png");
    }
    &.ticket {
      background-image: url("../assets/imgs/icons/ticket-active.png");
      background-size: 72px 72px;
      margin-top: -16px;
    }
    &.cinema {
      background-image: url("../assets/imgs/icons/cinema.png");
    }
    &.cinema.router-link-active {
      background-image: url("../assets/imgs/icons/cinema-active.png");
    }
    &.mine {
      background-image: url("../assets/imgs/icons/mine.png");
    }
    &.mine.router-link-active {
      background-image: url("../assets/imgs/icons/mine-active.png");
    }
  }
}
</style>
